<template>
  <Dropdown
    v-if="type == 'dropdown'"
    :trigger="trigger"
    :placement="placement"
    @on-click="onClick"
  >
    <a><Icon type="ios-more" size="14" /></a>
    <DropdownMenu slot="list" @on-click="onClick">
      <DropdownItem
        v-for="(li, i) in items"
        :key="i"
        :disabled="li.disabled"
        :name="i"
      >
        <Icon :type="li.icon"></Icon>
        <span v-text="li.text"></span>
      </DropdownItem>
    </DropdownMenu>
  </Dropdown>
  <ButtonGroup v-else-if="type == 'button'" size="small">
    <Button
      v-for="(li, i) in items"
      :key="i"
      @click="onClick(li)"
      :disabled="li.disabled"
      :icon="li.icon"
    ></Button>
  </ButtonGroup>
</template>

<script>
export default {
  name: "ops",
  data() {
    return {
      items: this.data,
    };
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    row: {
      type: Object,
    },
    trigger: {
      validator(value) {
        return ["click", "hover", "custom", "contextMenu"].indexOf(value) > -1;
      },
      default: "hover",
    },
    num: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      validator(value) {
        return ["dropdown", "button", "text", "text-icon"].indexOf(value) > -1;
      },
      default: "button",
    },
    placement: {
      validator(value) {
        return (
          [
            "top",
            "top-start",
            "top-end",
            "bottom",
            "bottom-start",
            "bottom-end",
            "left",
            "left-start",
            "left-end",
            "right",
            "right-start",
            "right-end",
          ].indexOf(value) > -1
        );
      },
      default: "bottom",
    },
  },
  created() {
    this.items = this.data;
  },
  components: {},
  computed: {
    list() {
      return this.data.slice(0, this.num);
    },
  },
  methods: {

    onClick(li) {
      if (li>-1) {
        li = this.data[li];
      }
      if (li.click) {
        li.click(this.row, li);
      }
      this.$emit("on-button-click",this.row,li);
    },
  },
  watch: {
    data(v) {
      this.items = v;
    },
  },
};
</script>